<script setup>
import { reactive,ref } from 'vue';
import Carousel from './Carousel.vue';
import Course from './Course.vue'
import 'element-plus/dist/index.css';
import Event from './Event.vue';
import Tab from './Tab.vue';
import Honor from './Honor.vue';
import url1 from "/src/assets/img/break.jpg";
import url2 from "/src/assets/img/break1.jpg";
import url3 from "/src/assets/img/break2.jpg";
import url4 from "/src/assets/img/break3.jpg";
const course_content = ref([{image:url1}, {image:url2}, {image:url3}, {image:url4}])
console.log(course_content)
</script>

<template>
    <Carousel></Carousel>
    <div class="index_title">
        <div class="index_title_span">探索适用于各年龄段的热门 STEAM 动手实践解决方案</div>
        <div class="index_title_text" >赋能教师和学生，深化知识理解，提升学习参与度，激发终身学习的热情。</div>
        <hr/>
    </div>
    <div class="content_box">
        <div class="Course_">
            <div v-for="item in course_content">
                <Course :message="item"></Course>
            </div>
        </div>
    </div>
    <div class="index_title">
        <div class="index_title_span">匹配国家课程标准 – 寓学于乐</div>
        <div class="index_title_text" >生动有趣且与国家课程标准匹配的教学方案，简单易用，具备灵活扩展性，以满足不同学习者的需求。</div>
        <hr/>
    </div>
    <div class="content_box">
        <Tab></Tab>
    </div>
    <div class="index_title">
        <div class="index_title_span">激发无限潜能</div>
        <div class="index_title_text" >来自无数学生与家长的评价，激励着我们不断努力进步。</div>
        <hr/>
    </div>
    <div class="content_box">
        <Event></Event>
        <Honor></Honor>
    </div>
        
    <div style="height: 10000px;">s</div>
</template>

<style scoped>
.content_box {
    margin: auto;
    max-width: 1920px;
    font-size: 1.2em;
    margin-top: 20px;
}

.Course_ {
    margin: auto;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 0;
    box-sizing: border-box;
}
.index_title{
    font-weight: bold;
    margin: 4em;
    margin-top: 2em;
    text-align: center;
}
.index_title .index_title_span{
    margin: auto;
    width: 60%;
    color: black;
    font-size: 3em;
}
.index_title hr{
    color: #EC0000;
    margin-top: 2em;
    border: 0.5em solid ;
    width: 10%;
}
</style>
